import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/common/index.dart';
import 'package:oramemo/generated/assets.dart';
import 'package:qr_flutter/qr_flutter.dart';

import 'invcode_logic.dart';
import 'invcode_state.dart';

class InvcodePage extends StatelessWidget {
  const InvcodePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final InvcodeLogic logic = Get.put(InvcodeLogic());
    final InvcodeState state = Get.find<InvcodeLogic>().state;

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        centerTitle: true,
        title: Text(
          '面对面邀请',
          style: TextStyle(
            color: Colors.black,
            fontSize: 16.sp,
            fontFamily: 'Inter',
            fontWeight: FontWeight.w600,
            letterSpacing: 1,
          ),
        ),
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios, color: Colors.black, size: 20.sp),
          onPressed: () => Get.back(),
        ),
      ),
      body: Obx(() => state.isLoading.value
          ? const Center(child: CircularProgressIndicator())
          : Column(
              children: [
                SizedBox(height: 80.h),
                // 邀请卡片
                RepaintBoundary(
                  key: logic.qrKey,
                  child: Container(
                    width: 331.w,
                    height: 398.h,
                    decoration: ShapeDecoration(
                      color: const Color(0xFFF3F5F9),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16.r),
                      ),
                    ),
                    child: Column(
                      children: [
                        SizedBox(height: 18.h),
                        // 头像
                        Obx(() => state.avatarUrl.value.isEmpty
                            ? Container(
                                width: 60.w,
                                height: 60.h,
                                decoration: const ShapeDecoration(
                                  // color: Color(0xFFD9D9D9),
                                  shape: OvalBorder(),
                                ),
                                child: IconX.image(Assets.facilityHardware, size: 60.r),
                              )
                            : CircleAvatar(
                                radius: 30.r,
                                backgroundImage: NetworkImage(state.avatarUrl.value),
                              )),
                        SizedBox(height: 9.h),
                        // 圈子名称
                        Obx(() => Text(
                              state.circleName.value,
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 20.sp,
                                fontFamily: 'Inter',
                                fontWeight: FontWeight.w400,
                                letterSpacing: 1,
                              ),
                            )),
                        SizedBox(height: 14.h),
                        // 二维码区域
                        Obx(() => Container(
                              width: 261.w,
                              height: 216.h,
                              color: Colors.white,
                              child: Center(
                                child: state.inviteCode.value.isEmpty
                                    ? Text(
                                        '二维码',
                                        style: TextStyle(
                                          color: Colors.black,
                                          fontSize: 20.sp,
                                          fontFamily: 'Inter',
                                          fontWeight: FontWeight.w400,
                                          letterSpacing: 1,
                                        ),
                                      )
                                    : QrImageView(
                                        data: state.inviteCode.value,
                                        version: QrVersions.auto,
                                        size: 200.w,
                                        backgroundColor: Colors.white,
                                      ),
                              ),
                            )),
                        SizedBox(height: 19.h),
                        // 提示文字
                        Text(
                          '家人亲友扫描上面的二维码，加入时光机圈子',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: const Color(0xFF888992),
                            fontSize: 12.sp,
                            fontFamily: 'Inter',
                            fontWeight: FontWeight.w400,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                const Spacer(),
                // 底部操作按钮
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Obx(() => TextButton(
                          onPressed: state.isSaving.value ? null : logic.saveToGallery,
                          child: state.isSaving.value
                              ? SizedBox(
                                  width: 16.w,
                                  height: 16.h,
                                  child: const CircularProgressIndicator(
                                    strokeWidth: 2,
                                    valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF2573FF)),
                                  ),
                                )
                              : Text(
                                  '保存到相册',
                                  style: TextStyle(
                                    color: const Color(0xFF2573FF),
                                    fontSize: 14.sp,
                                    fontFamily: 'Inter',
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                        )),
                    Container(
                      height: 20.h,
                      width: 1.w,
                      color: const Color(0x4C888992),
                      margin: EdgeInsets.symmetric(horizontal: 10.w),
                    ),
                    Obx(() => TextButton(
                          onPressed: state.isSharing.value ? null : logic.shareQrCode,
                          child: state.isSharing.value
                              ? SizedBox(
                                  width: 16.w,
                                  height: 16.h,
                                  child: const CircularProgressIndicator(
                                    strokeWidth: 2,
                                    valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF2573FF)),
                                  ),
                                )
                              : Text(
                                  '分享二维码',
                                  style: TextStyle(
                                    color: const Color(0xFF2573FF),
                                    fontSize: 14.sp,
                                    fontFamily: 'Inter',
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                        )),
                  ],
                ),
                SizedBox(height: 70.h),
                // 底部指示条
                Container(
                  width: 135.w,
                  height: 5.h,
                  margin: EdgeInsets.only(bottom: 13.h),
                  decoration: ShapeDecoration(
                    color: const Color(0xFF161C18),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100.r),
                    ),
                  ),
                ),
              ],
            )),
    );
  }
}
